<template>
  <p>{{props.msg}}</p>
  <button @click="handleClick">点我调用父组件方法</button>
  <!--<div>{{ count}}  {{ user.name}}</div>-->
  <!--<div v-for="(item,index) in arr" :key="index">{{item}}</div>-->
  <div>{{ originData.count}}  {{ originData.user.name}}</div>
  <div v-for="(item,index) in originData.arr" :key="index">{{item}}</div>
  <button @click="incriment">点击count增加</button>
</template>

<script setup lang="ts">

import {ref, reactive, watchEffect,watch} from "vue";

const count = ref(0);
const user = reactive({name: "张三"})
const arr = reactive([1, 2, 3, 4]);


//综合定义方法
const originData  = reactive({
  count: 0,
  user:{
    name: "张三"
  },
  arr: [1, 2, 3, 4]
})

watchEffect(() => {
  console.log(count.value);
  console.log(originData.user.name)
});

watch([count,originData.user], (n, o) => {
  console.log(n[0], n[1].name);
},{deep:true, immediate: true});

const incriment = () => {
  count.value++;
  // user.name = "李四";
  // arr[2] = 6;
  originData.count++;
  originData.user.name = "李四";
  originData.arr[0] = 10;

}
function created() {
  console.log("created子");
}

created();

const props = defineProps({
  msg: {
    type: String,
    default: () => "默认值"
  }
});
const emit = defineEmits(['on-change']);
const handleClick = () => {
  emit('on-change', '父组件方法被调用了');

};

const childnode = () => {
  // console.log("子组件方法");
};
defineExpose({
  child: "我是子组件数据",
  childnode
})
</script>

